<!-- 收藏页 -->
<template>
<div>
  <div class="demo-upload-list" v-for="item in uploadList" :key="item">
    <template v-if="item.status === 'finished'">
      <img :src="item.url">
      <div class="demo-upload-list-cover">
        <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
        <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
      </div>
    </template>
    <template v-else>
      <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
    </template>
  </div>
  <Upload
    ref="upload"
    :show-upload-list="false"
    :default-file-list="defaultList"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png']"
    :max-size="10240"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    :on-progress="file"
    :on-error="error"
    multiple
    type="drag"
    action="//jsonplaceholder.typicode.com/posts/"
    style="display: inline-block;width:58px;">
    <div style="width: 58px;height:58px;line-height: 58px;">
      <Icon type="camera" size="20"></Icon>
    </div>
  </Upload>
    <Modal title="View Image" v-model="visible">
      <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
    </Modal>
  <NewsCell></NewsCell>
  <p>100{{ratings}}</p>
  <ul id="fragment_text">
    <li>text1</li>
    <li>text2</li>
    <li>text3</li>
  </ul>
  <input type="text" v-model="msg"/>
  <p>{{msg}}</p>
</div>
</template>

<script>
import { mapState, install } from "vuex";
import NewsCell from "../../components/NewsCell.vue";
export default {
  name: "index",
  components: { NewsCell },
  data() {
    return {
      msg: "atguigu",
      defaultList: [
        {
          name: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
        },
        {
          name: "bc7521e033abdd1e92222d733590f104",
          url:
            "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
        }
      ],
      imgName: "",
      visible: false,
      uploadList: []
    };
  },
  props: {},
  computed: {
    ...mapState(["ratings"])
  },
  methods: {
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url =
        "https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
      file.name = "7eb99afb9d5f317c912f08b5212fd69a";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式是不正确的",
        desc: "文件格式" + file.name + "不正确请选择jpg或者png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件大小超过限制",
        desc: "文件" + file.name + "太大了不能超过10M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 6;
      if (!check) {
        this.$Notice.warning({
          title: "最多可以上传六张照片。"
        });
      }
      return check;
    },
    // vue源码分析
    /*
      通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型
      lis 是伪数组将伪数组转换为真数组
    */
    analyze() {
      var lis = document.getElementsByTagName("li");
      console.log(lis instanceof Array, lis[1].innerHTML, lis.forEach);
      const lis2 = Array.prototype.slice.call(lis);
      console.log(lis2 instanceof Array, lis2[0].innerHTML, lis2.forEach);
      /**
       * Object.defineProperty(ogj,propertyName,{}):给对象添加属性
       */
      const obj = {
        firstName: "A",
        lastName: "B"
      };
      Object.defineProperty(obj, "fullName", {
        get() {
          return this.firstName + "-" + this.lastName;
        },
        set(value) {
          const names = value.split("-");
          this.firstName = names[0];
          this.lastName = names[1];
        }
      });
      console.log(obj.fullName);
      obj.firstName = "C";
      obj.lastName = "D";
      console.log(obj.fullName);
      obj.fullName = "E-F";
      console.log(obj.firstName, obj.lastName);
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.$store.dispatch("getShopRatings");
    this.uploadList = this.$refs.upload.fileList;
    this.analyze();
  }
};
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>